<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>
    <title>Document</title>
</head>
<!-- 
    时间格式化
    moment.js强大但是体积比较大
    day.js和moment.js相似,而且轻量


过滤器

    1.定义：我个人理解就是对于页面展示的数据，进行格式化之后返回来的值展示到页面上(对要显示的数据进行特定格式化后再显示)(适用于简单的额处理)
    2.语法:
        1.注册过滤器: ①全局:Vue.filter(name,callback) ②局部当前组件:new Vue{filters:{}}
        2.使用过滤器:
                    
                    ①插值语法中:{{xxx  | 过滤器名}} 
                    ②单项绑定v-bind: v-bind:属性="xxx | 过滤器名"
        3.备注:
                1.过滤器也可以接收额外参数,多个过滤器也可以串联
                2.并没有改变原本的数据,是产生新的对应的数据
 -->

<body>
    <div id="root">
    <!-- 场景:现在给我一个时间戳,展示到页面上显示为时间,但是不要改变时间戳的值 -->
        <!-- computed 计算属性-->
        <h3>{{fmtTime}}</h3>
        <!-- methods 方法-->
        <h3>{{getFmTime("YYYY")}}</h3>
        <!-- filters过滤器(过滤器前边内容相当于参数) -->
        <h3>{{time | filtFmTime}}</h3>
        <!-- 我想要两个过滤器分别一个功能是转换成正常时间,一个是截取前四位怎么实现? -->
        <!-- 得到了一个结论,过滤器是一层一层的进行的不需要加() -->
        <h3>{{time | filtFmTime | mySlice}}</h3>

    </div>
    <script>
        // 全局的过滤器如何配置 filter没有's',所有组件都可以用这个过滤器
        Vue.filter('mySlice',function (val){
                          return val.slice(0,4)
                    }) 

        new Vue({
            el: "#root",
            data: {
                time: 1621561377603 //时间戳
            },
            computed: {
                fmtTime() {
                    return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            methods: {
                // JS中调用方法添加参数,如果有则覆盖默认写的,没有则用默认的(默认怎么个格式 就是后面这种形式  str="默认参数")
                getFmTime(str="YYYY-MM-DD HH:mm:ss") {
                    // Vue中插值语法需要加()执行这个方法，因为Vue不会自动调用，平时我们用的click事件后边不用加()也会自动调用
                    return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
                }
            },

            // 局部过滤器,只能在当前组件使用
            filters: {
                filtFmTime(val) {
                    // | 前边是传入的参数，vue会自动调用该过滤器中方法，不用加(),加不加都不影响
                    return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
                },
                mySlice(val){
                    return val.slice(0,4)
                }
            }
        })
    </script>

</body>

</html>